import React, { useState } from 'react'
import styled from 'styled-components'

const Child1 = ({ val }: { val: any }) => {
    console.log("child1 渲染")
    const [state, setState] = useState<number>(0)
    const handleClick = () => {
        const newVal = state + 1;
        setState(newVal)
    }
    return (
        <Wrapper>
            <Text>prop:{val}</Text>
            <Text>state:{state}</Text>
            <Button onClick={handleClick}>测试</Button>
        </Wrapper>
    )
}
export default React.memo(Child1)
const Wrapper = styled.div`
   width: 400px;
   height: 300px;
   border: 1px solid #0f74af;
   border-radius: 3px;
`
const Text = styled.div`
    margin: 20px;
    color:red;
`
const Button = styled.div`
    width: 200px;
    height: 32px;
    line-height:32px;
    background-color: #d6ec10;
    color:#fff;
    font-size: 14px;
    font-weight:bold;
    margin: auto;
`